<template>
	<view>
		<view class="projectInfo ">
			<view style="line-height: 100upx;padding: 0 20upx;font-size: 36upx;font-weight: 700;">备案管理基础信息</view>
			<fromItem title="项目名称" top="30upx" flex="left" nameColor="#989898" projectName="#343434"
				:data="lrCheckSample.fProjectname"></fromItem>
			<fromItem title="项目类型" :data="lrCheckSample.fProjecttype" flex="left" nameColor="#989898"
				projectName="#343434">
			</fromItem>
		</view>
		<view class="projectUnI" id="datePage">
			<view class="min-collapse">
				<view class="card">
					<view>
						<view class="contents" :class="isShow ? 'animation': 'show-list animation' "
							:style="{'height':isShow? 1050+feild*290+'upx' :'0'}">
							<view class="projectInfo">
								<fromItem title="委托方" :data="lrCheckSample.fClientusername" flex="left"
									nameColor="#989898" projectName="#343434">
								</fromItem>

								<fromItem title="项目地点" top="30upx" flex="left" nameColor="#989898" projectName="#343434"
									:data="lrCheckSample.fProjectlocation">
								</fromItem>
								<fromItem title="接洽人" :data="lrCheckSample.fHostusername" flex="left"
									nameColor="#989898" projectName="#343434">
								</fromItem>
								<fromItem title="接洽人电话" :data="lrCheckSample.fHosttelephone" flex="left"
									nameColor="#989898" projectName="#343434">
								</fromItem>

								<fromItem title="填写日期" :data="lrCheckSample.fWrittendates" flex="left"
									nameColor="#989898" projectName="#343434">
								</fromItem>
								<fromItem title="项目任务情况" type="textarea" :data="lrCheckSample.fProjectdescription"
									nameColor="#989898" flex="left" projectName="#343434"></fromItem>
								<fromItem title="使用资质参数情况" type="textarea" :data="lrCheckSample.fProjiectcertification"
									nameColor="#989898" flex="left" projectName="#343434"></fromItem>

								<fromItem title="资料附件" flex="left" nameColor="#989898" projectName="#343434"></fromItem>
								<view class="fileList">
									<div class="box" v-if="fileList.length !== 0">
										<div class="file" style v-for="(item, index) in fileList" :key="index"
											@click="pdfPage(item.name, item.url)">
											<image src="../../static/organization.png">
											</image>
											<span class="text" style>{{ item.name }}</span>
										</div>
									</div>
								</view>


							</view>

						</view>
					</view>
				</view>
				<view class="card-view retract icon" @click="test">
					<text class="iconfont next icon-fanhui" :class="[isShow ? 'retract_icon' : '']" />
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	import fromItem from '@/components/from-item/from-item.vue';
	export default {

		props: {
			lrCheckSample: {
				type: Object,
				default: function() {
					return {}
				}
			},

			fileList: {
				type: Array,
				default: function() {
					return []
				}
			},

		},
		data() {
			return {
				page: false,
				isShows: false,
				isShow: false,

				feild: 0,


			}
		},
		components: {
			fromItem
		},
		watch: {
			fileList(e) {
				// console.log(e)
				if (e.length > 4) {
					this.feild =
						e.length % 4 === 0 ?
						e.length / 4 :
						Math.floor(e.length / 4 + 1);
				} else if (e.length <= 4 && e.length > 0) {
					this.feild = 1;
				} else if (e.length == 0) {
					this.feild = 0;
				}
			},


		},

		methods: {
			// 折叠
			test() {
				this.isShow = !this.isShow
			},

			pdfPage(name, url) {

				// console.log(123,name, url)
				var aa = url;
				let links = encodeURIComponent(aa);
				// console.log(links);
				uni.navigateTo({
					url: '/pages/apply/pdf?links=' + links + '&names=' + name
				});
			},


		}
	}
</script>
<style lang="less">
	// @import '../../components/s-calendar/icon.css';
	@import (less) '@/static/lx-calendar/fonts/iconfont.css';
	@import "@/components/s-calendar/icon.css";
	@import (less) '@/static/lx-calendar/fonts/iconfont.css';





	// 文件
	.fileList {
		padding: 0px 15px;
		background-color: #fff;
	}

	.box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.file {
			height: 260upx;
			width: 22.8%;
			display: flex;
			flex-direction: column;
			margin-right: 20upx;
			margin-top: 10px;

			image {
				width: 100%;
				margin: 0 auto;
			}

			.text {
				font-size: 14px;
				width: 160upx;
				display: block;
				height: 65px;
				color: #1b2c79;
				line-height: 35px;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.file:nth-child(4n) {
		margin-right: 0px;
	}


	// 文件
	// 折叠
	.projectInfo {
		// border-bottom: 2upx solid #E7E7E7;
		margin-top: 20upx;
		// padding: 0 56upx;
		background-color: #fff;
		width: 100%;
	}

	.min-collapse {
		width: 100%;

		.right-arrow {
			//p-left-10
			width: 24rpx;
			height: 24rpx;
			padding-top: 10rpx;
			transform: rotate(90deg);
			padding-left: 10rpx;
		}

		.right-arrow-a {
			transform: rotate(7deg);
		}

		.card {
			// box-shadow: 0 0 10px 4px #EEEEEE;

			.card-view {
				width: 100%;
				//min-flex min-flex-main-between f28
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				padding: 0rpx;
				padding-bottom: 0;

			}
		}

		.contents {
			overflow: hidden;
			display: flex;
			// justify-content: flex-start;
			// flex-wrap: wrap;
			// max-height: 0;
			// padding: 0 20rpx;

			.statisticsMoudle {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				height: 60upx;
				margin: 50upx 0 0 0;
				border-right: 4upx solid #666666;

				.time {
					color: #333333;
					font-size: 40upx;
					font-weight: 700;
				}

				.text {
					color: #666666;
					font-size: 24upx;
					line-height: 40upx;
				}
			}

			.statisticsMoudle:last-child {
				border: none !important;
			}

			.chioce-date-item {
				// width: 112rpx;
				// height: 58rpx;


				font-size: 28rpx;
				text-align: center;

				display: block;
			}

			.chioce-date-item:nth-child(5n) {
				margin: 0;
			}

			.chioce-date-item-active {
				// width: 112rpx;
				// height: 58rpx;
				font-size: 28rpx;
				text-align: center;
			}

			.chioce-date-item-active:nth-child(5n) {
				margin: 0;
			}

			.m-right-20 {
				// margin-right: 35rpx;
				// margin-bottom: 20rpx;
			}
		}

		//在txt中修改左右间距，默认使用父组件外容器的边距
		.content-txt {
			overflow: hidden;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			max-height: 0;
			padding-left: 20rpx;
			padding-right: 20rpx;

			// padding-bottom: 20rpx;
			.txt {
				word-break: break-all;
				white-space: normal;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				// padding:0 20rpx;
				padding-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: normal;
			}
		}

		.show-list {
			height: 0;
		}

		.show {
			max-height: 0;
			margin-bottom: 20rpx;
		}

		.animation {
			transition-property: all;
			transition-duration: 0.5s;
			transition-timing-function: ease;
		}
	}

	.projectUnI {
		// background-color: #FFF;
	}

	.icon-fanhui::before {
		content: "";
		color: #A7A7A7;
		font-weight: 700;
	}

	.icon {
		display: block;

		.next {
			transform: rotate(180deg);
			display: block;
		}
	}

	.retract {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;

		.iconfont {
			transform: rotate(270deg);

			&.retract_icon {
				transform: rotate(90deg);
			}
		}
	}

	// 折叠
</style>
